<template>
  <view class="cart" v-if="cartList.length>0">
    <!-- 收货地址 -->
    <my-address></my-address>
    <!-- 商品列表 -->
    <view class="list">
      <!-- 标题区域 -->
      <view class="title">
        <uni-icons type="shop" size="20"></uni-icons>购物车
      </view>
      <uni-swipe-action>
        <uni-swipe-action-item @click="delEvent(item.goods_id)" :right-options="rightOptions" v-for="item in cartList"
          :key="item.goods_id">
          <!-- <view>测试滑动</view> -->
          <my-goods @changeStatus="changeStatus" @changeCount="changeCount" :item="item" :isShow="true"></my-goods>
        </uni-swipe-action-item>
      </uni-swipe-action>

    </view>
    <!-- 结算区域 -->
    <my-total></my-total>
  </view>
  <view class="nodata" v-else>
    <image src="../../static/images/cart_empty@2x.png" mode=""></image>
    <view class="word">
      空空如也~
    </view>
  </view>
</template>
<script>
  import {
    mapState
  } from 'vuex'
  import setTabbar from '@/mixins/index.js'
  export default {
    mixins: [setTabbar],
    computed: {
      ...mapState('cart', ['cartList'])
    },
    data() {
      return {
        rightOptions: [{
          text: '删除',
          style: {
            backgroundColor: '#ff0000'
          }
        }]
      };
    },
    methods: {
      changeStatus(id) {
        this.$store.commit('cart/setStatus', id)
      },
      changeCount(obj) {
        this.$store.commit('cart/setCount', obj)
      },
      async delEvent(goods_id) {
        console.log('delEvent');
        const res = await uni.showModal({
          title: "提示",
          content: "您确定删除该项吗?"
        })
        // console.log(res);
        if (res.confirm) {
          this.$store.commit('cart/delList', goods_id)
        }
      }
    }

    // onLoad() {
    //   uni.setTabBarBadge({
    //     index: 2,
    //     text: "8"
    //   })
    // }
  }
  /*
   mixin
     xxx.js
     export default {
       data,
       watch.....
     }   
     全局混入
        import xxx from 'xxx'
        Vue.mixin(xxx)
     局部混入
       import xxx from 'xxx'
       mixins:[xxx]
    注意：命名冲突以当前组件为主
         生命周期：都会执行 
  
  
  */
</script>

<style lang="scss" scoped>
  .cart {
    padding-bottom: 100rpx;

    .list {
      .title {
        padding: 20rpx;
        border-bottom: 1px solid #eff0ef;
      }
    }
  }

  .nodata {
    margin-top: 100px;
    text-align: center;

    image {
      width: 200rpx;
      height: 200rpx;
    }

    .word {
      font-size: 12px;
      color: #80809c;
      margin-top: 20rpx
    }
  }
</style>